<template>
  <Form :model="formItem" ref="formItem" :label-width="120">
    <!-- 营销活动基本信息 -->
    <Card>
      <p slot="title">
        营销活动基本信息
        <a href="#" slot="extra" @click.prevent="returnTable()" style="float:right">
          <Icon type="arrow-left-c"></Icon>返回
        </a>
      </p>
      <p>
        <Form-item label="营销活动名称" style="margin-bottom:2vh;">
          <Input required v-model="formItem.name" placeholder="请输入营销活动名称"></Input>
        </Form-item>
        <Form-item label="活动类别">
          <Select  v-model="formItem.campaignCategoryId" placeholder="请选择活动类别"  @on-open-change="FetchmarketactvityCategory" clearable>
            <Option v-for="(item,index) in actvityCategorylist" :key="index" :value="item.id">{{item.name}}</Option>
          </Select>
        </Form-item>
      </p>
    </Card>
    <!-- 选择营销人群 -->
    <Card style="margin-top:2vh;">
      <p slot="title">选择营销人群</p>
      <div style="position:relative;">
        <Row>
          <Col span="5" push="19">
            	<Input v-model="groupname" style="width:150px" placeholder="请输入营销活动名称">
								<Button slot="append" icon="ios-search" @click="queryTableList()"></Button>
							</Input>
          </Col>
          <Col span="2" push="11">
            <Button type="success" @click="goaddgroup">
              <Icon type="plus"></Icon>新增人群
            </Button>
          </Col>
        </Row>
      </div>
      <div class="tabs_container">
        <Row>
          <Col span="24">
              <div class="tabs_box">
                  <Row>
                      <ul class="tabs_list">
                          <li v-for="(tab, index) in tabslist" :class="{active: index==nums}" @click="toggle(index,tab)" :key="index">
                          {{tab.name}}
                          </li>
                          <div class="clear"></div>
                      </ul>
                      <div class="clear"></div>
                  </Row>
              </div>
          </Col>
        </Row>
        <Row> 
          <Col>
            <Table :loading="TableLoading" border :columns="groupcolumns" :data="listData"  @on-select="chooseInfogroup" @on-select-all="chooseALLgroup"></Table>
          </Col>
        </Row>
        <Row type="flex" justify="center" style="margin-top:2vh;">
          <Col>
            <Page :id="pageId" show-total :total="totalgroup" :page-size="pageSize" @on-change="pageable" @on-page-size-change="changegroupPageSize" show-sizer show-elevator></Page>
          </Col>
          <Col push="1">
            <Button style="margin-top: 6px;" type="primary"  @click="goElevatorPage(pageId)">跳转</Button>
          </Col>
        </Row>
      </div>
    </Card>
    <!-- 选择权益 -->
    <Card style="margin-top:1%">
      <p slot="title">选择权益</p>
      <ul class="communicationmode_list">
          <li @click="showintegralmarks">
            <Row>
                <Col span="6">
                  <Icon type="ios-mail-outline" size="50"></Icon>
                </Col>
                <Col span="14">
                  <h2>积分</h2>
                  <p>对目标客户直接发送积分</p>
                </Col>
              </Row>
              <span class="mark" v-show="integralmark">&#10004;</span>
          </li>
          <li @click="showcouponmarks">
              <Row>
                <Col span="6">
                  <Icon type="ios-mail-outline" size="50"></Icon>
                </Col>
                <Col span="14">
                  <h2>线下优惠券</h2>
                  <p>选择微信会员通生成的线下优惠券发送给客户</p>
                </Col>
              </Row>
              <span class="mark" v-show="couponmark">&#10004;</span>
          </li>
      </ul>
    </Card>
    <!-- 设置积分权益 -->
    <Card style="margin-top:1%;" v-show="integralmark">
      <p slot="title">设置积分权益</p>
      <Row>
        <Form-item label="设置赠送积分数量">
          <InputNumber v-model="formItem.value" placeholder="请输入积分数量" :min='min' style="width:400px"></InputNumber>
        </Form-item>
      </Row>
    </Card>

    <div class="underline_coupon" v-show="couponmark">
      <p class="title">设置线下优惠券</p>
      <div class="underline_coupon_container">
          <ul class="underline_coupon_box" v-for="(item,index) in couponListAdd" :key="index">
            <li class="underline_coupon_detail" v-for="(items,index) in chooseList" :key="index">
              <Card>
                  <Row style="border-bottom:2px solid #f2f2f2;">
                    <Col span="20">
                      <p>优惠券名称：
                        <Input v-model="items.name" :disabled="disabled1" style="width:150px;margin-bottom:5px;"/>
                      </p>
                    </Col>
                    <Col span="2">
                      <Icon type="md-create" size="25" @click="disabled1 =! disabled1"/>
                    </Col>
                    <Col span="2">
                      <Icon type="ios-trash" size="25" @click="removeCouponListItem(index)"/>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="24">
                      <p>优惠券额度：{{items.amount}}元</p>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="24">
                      <p>使用条件：{{items.usedProduct}}</p>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="24">
                      <p>使用期限：{{items.beginDate | formatDate}}</p>
                    </Col>
                    <Col span="14" push="5">
                      <p>{{items.endDate | formatDate}}</p>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="24">
                      <p>发行数量：{{items.totalCount}}&nbsp;张</p>
                    </Col>
                  </Row>
                  <Row>
                    <Col span="24">
                      <p>每人限领：{{items.limitTimes}}&nbsp;张</p>
                    </Col>
                  </Row>
              </Card>
            </li>
          </ul>
           <Card  style="height:25vh;width:22vw;text-align:center">
              <div @click="chooseModel = true">
                <Icon type="ios-add" size="110"/>
                <p style="text-align:center">选择线下优惠券</p>
              </div>
            </Card>
      </div>
    </div>

    <!-- 选择沟通方式 -->
    <Card style="margin-top:1%">
      <p slot="title">选择沟通方式</p>
      <ul class="communicationmode_list">
          <li @click="showsms">
            <Row>
                <Col span="6">
                  <Icon type="ios-mail-outline" size="50"></Icon>
                </Col>
                <Col span="14">
                  <h2>短信</h2>
                  <p>使用短信主动通知客户</p>
                </Col>
              </Row>
              <span class="mark" v-show="showsmsmark">&#10004;</span>
          </li>
          <li @click="showwx">
              <Row>
                <Col span="6">
                  <Icon type="ios-mail-outline" size="50"></Icon>
                </Col>
                <Col span="14">
                  <h2>微信模板消息</h2>
                  <p>使用微信模板消息推送客户</p>
                </Col>
              </Row>
              <span class="mark" v-show="showwxmark">&#10004;</span>
          </li>
      </ul>
    </Card>
    <!-- 设置沟通方式优先级 -->
    <Card style="margin-top:1%">
      <p slot="title">设置沟通方式优先级</p>
      <Form-item label="是否重复发送" prop="isRepeat">
        <Radio-group v-model="formItem.isRepeat">
          <span @click="hidePriority"><Radio label="1">允许重复发送</Radio></span>
          <span @click="showPriority"><Radio label="0" >避免重复发送</Radio></span>
        </Radio-group>
      </Form-item>
      <Form-item label="优先级设置" v-if="showpriority==true" prop="priority">
        <Radio-group v-model="formItem.priority">
          <Radio label="1">优先短信发送</Radio>
          <Radio label="2">优先微信消息发送</Radio>
        </Radio-group>
      </Form-item>
    </Card>

    <!-- 设置短信 -->
    <Card class="sms_container" v-show="showsmsmark"> 
      <p slot="title">设置短信</p>
      <Form-item label="黑名单过滤：" > 
        <CheckboxGroup v-model="formItem.smsCommunication.excludeBlacklist">
          <Checkbox label="1">排除短信黑名单客户</Checkbox>
        </CheckboxGroup>
      </Form-item>
      <Form-item label="过滤已营销客户：" prop="communicationHours">
        <span>排除最近</span>&nbsp;<Input v-model="formItem.smsCommunication.communicationHours" placeholder="输入时长" style="width: 150px"/>&nbsp;<span>小时短信营销过的客户</span>
      </Form-item>
      <Form-item label="短信内容：">
        <div class="sms_container_box">
          <div class="sms_container_header">
            <Row style="border-bottom:1px solid #f2f2f2;">
              <!-- <Col span="4" push="8">
                <span href="" style="font-size:0.9rem;color:lightskyblue;" @click="showfieldmodel = true">#插入动态信息#</span>
              </Col> -->
              <Col span="6">
                <span style="font-size:0.9rem;color:lightskyblue;" @click="showphonemodel = true"><Icon type="md-tablet-portrait" size="15"/>测试手机号</span>
              </Col>
              <Col span="6" push="10">
                <span style="font-size:0.9rem;color:lightskyblue;" @click="showsmsmodel"><Icon type="ios-keypad" size="20"/>选择模板</span>
              </Col>
            </Row>
          </div>
          <div class="input_box">
            <Input v-model="formItem.smsCommunication.contents" type="textarea" readonly :autosize="{minRows: 4,maxRows: 5}" placeholder="在此处输入推送内容" />
          </div>
          <div class="button_box">
            <Row>
              <Col span="3">
                <Button @click="Sendsmstest">短信测试</Button>
              </Col>
            </Row>
          </div>
        </div>
      </Form-item>
    </Card>

    <!-- 设置微信模板消息 -->
    <Card style="margin-top:1%;" v-show="showwxmark">
      <p slot="title">设置微信模板消息</p>
      <Form-item label="黑名单过滤：">
        <CheckboxGroup v-model="formItem.wxCommunication.excludeBlacklist">
          <Checkbox label="1">排除微信黑名单客户</Checkbox>
        </CheckboxGroup>
      </Form-item>
      <Form-item label="过滤已营销客户：">
        <span>排除最近</span>&nbsp;<Input v-model="formItem.wxCommunication.communicationHours" placeholder="输入时长" style="width: 150px"/>&nbsp;<span>小时微信营销过的客户</span>
      </Form-item>
      <Form-item label="微信模板消息内容：" style="margin-top:2vh;" v-model="formItem.wxCommunication.contents">
        <div class="wx_modal_container"  v-if="showwxmodel">
            <p style="text-align:center;">您还未选择微信消息内容，请选择合适的微信消息模板</p>
            <Row type="flex" justify="center">
              <Col>
                <Button type="primary" @click="choosewxModel=true">选择微信消息模板</Button>
              </Col>
            </Row>
        </div>
        <Card v-else style="width:26vw;" >
              <ul>
                <li v-for="(item,index) in formItem.wxCommunication.contents" :key="index">
                  <span :style="{color:item.color}">{{item.label}}:</span>
                  <span :style="{color:item.color}">{{item.value}}</span>
                </li>
                <span style="position:absolute;top:10px;right:10px;" @click="handleRemove">
                  <Icon type="md-trash" size="30"/>
                </span>  
              </ul>
        </Card>
      </Form-item>
    </Card>

    <!-- 设置营销时间  -->
    <Card style="margin-top:1%">
      <p slot="title">设置营销时间</p>
      <div class="marketingtime">
          <RadioGroup v-model="formItem.scheduleModel" vertical>
              <span @click="hideCircle">
              <Radio label="1">
                  <span>立即发送</span>
                  <!-- <span style="margin-left:2vw;color:#ccc;">根据人数预计发送时间： 2018/7/18  20:45</span> -->
              </Radio>
              </span>
              <span @click="hideCircle">
                <Radio label="2">
                  <span>定时发送</span>
                  <DatePicker type="datetime" placeholder="选择发送时间" style="width: 200px;padding-left:2vw;" v-model="formItem.scheduleExecTimeStr" @on-change="formItem.scheduleExecTimeStr=$event"></DatePicker>
                </Radio>
              </span>
              <span @click="showCircle">
                <Radio label="3">
                  <Icon type="social-windows"></Icon>
                  <span>周期性发送</span>
                    <Row v-if="showcircle==true">
                      <Col span="2" style="width:10vw;margin-left:5vw;border-right:1px solid #f2f2f2;"> 
                        <RadioGroup v-model="formItem.periodType" vertical >
                          <span @click="showisworking"><Radio label="1">每天</Radio></span>
                          <span @click="showisweek"><Radio label="2">每周</Radio></span>
                          <span @click="showismonth"><Radio label="3">每月</Radio></span>
                        </RadioGroup>
                        </Col>
                        <Col span="10">
                          <Row>
                              <Col span="20" push="1" v-if="num==1">
                                <Form-item style="width:30vw;margin-left:-6vw;">
                                  <RadioGroup v-model="formItem.isWorkingDay">
                                    <Radio label="0">每天</Radio>
                                    <Radio label="1">仅工作日</Radio>
                                  </RadioGroup>
                                </Form-item>
                              </Col>
                              <Col span="20" v-if="num==2" push="1">
                                <CheckboxGroup v-model="formItem.weeks" @on-change="splitweeks">
                                  <Checkbox label="1">周一</Checkbox>
                                  <Checkbox label="2">周二</Checkbox>
                                  <Checkbox label="3">周三</Checkbox>
                                  <Checkbox label="4">周四</Checkbox>
                                  <Checkbox label="5">周五</Checkbox>
                                  <Checkbox label="6">周六</Checkbox>
                                  <Checkbox label="7">周日</Checkbox>
                                </CheckboxGroup>
                              </Col>
                              <Col span="20" push="1" v-if="num==3">
                                  <Input v-model="formItem.monthDay" style="width:150px;padding-top:1vh;"/>&nbsp;号
                              </Col>
                          </Row>
                        </Col>
                    </Row>
                    <Row style="margin:0px 0px 0px 4vw;" v-if="showcircle==true">
                      <Form-item label="短信发送时间：" style="margin-top:1vh;">
                        <DatePicker type="datetime" placeholder="选择发送时间" style="width: 200px" v-model="formItem.sendTime" format="HH:mm:ss" @on-change="formItem.sendTime=$event"></DatePicker>
                      </Form-item>
                      <Form-item label="周期时间设置：" style="margin-top:1vh;">
                        <Row>
                          <Col span="5">
                            <!-- <DatePicker type="datetime" placeholder="选择周期发送时间" style="width: 200px;" v-model="formItem.startTimeStr" format="yyyy-MM-dd HH:mm:ss"  @on-change="formItem.startTimeStr=$event"></DatePicker> -->
                            <DatePicker type="datetime" placeholder="选择周期发送时间" style="width:200px;"  v-model="formItem.startTimeStr" format="yyyy-MM-dd HH:mm:ss" @on-change="formItem.startTimeStr=$event"></DatePicker>
                          </Col>
                          <Col span="2" style="text-align: center" push="7">-</Col>
                          <Col span="6" push="7">
                            <DatePicker type="datetime" placeholder="选择周期结束时间" v-model="formItem.endTimeStr" style="width: 200px"  format="yyyy-MM-dd HH:mm:ss" @on-change="formItem.endTimeStr=$event"></DatePicker>
                          </Col>
                        </Row>
                      </Form-item>
                    </Row>
            </Radio>
          </span>
          </RadioGroup>
          <Form-item style="margin-left:-8vw;">
            <CheckboxGroup v-model="formItem.sendCommAfterReward">
              <Checkbox label="1">保障权益到账后发送</Checkbox>
            </CheckboxGroup>
          </Form-item>
      </div>
    </Card>
 
    <!-- 设置效果监控时间 -->
    <Card style="margin-top:1%;margin-bottom:13%">
      <p slot="title">设置效果监控时间</p>
      <Form-Item label="效果监控时间">
        <Row>
          <Col span="2">沟通发送后</Col>
          <Col span="5">
            <Input v-model="formItem.reportMonitorHours" placeholder="请输入" style="width:187px"></Input>
          </Col>
          <Col span="6">小时</Col>
        </Row>
      </Form-Item>
    </Card>

    <Row class="activity_group">
      <Col span="5">
        <Row>
          <Col span="6">
            <Icon type="email" size="40"></Icon>
          </Col>
          <Col span="18" style="padding-top:10px">
            <p style="font-size:12px">目标人群</p>
            <p style="font-size:16px">{{targetgroupname}}</p>
          </Col>
        </Row>
      </Col>

      <Col span="4">
        <Row>
          <Col span="6">
            <Icon type="email" size="40"></Icon>
          </Col>
          <Col span="18" style="padding-top:10px">
            <p style="font-size:12px">短信发送人数</p>
            <p style="font-size:16px">{{smsSendNum}} 人</p>
          </Col>
        </Row>
      </Col>

      <Col span="5">
        <Row>
          <Col span="6">
            <Icon type="email" size="40"></Icon>
          </Col>
          <Col span="18" style="padding-top:10px">
            <p style="font-size:12px">线下优惠券发送人数</p>
            <p style="font-size:16px">{{couponSendNum}}人</p>
          </Col>
        </Row>
      </Col>

      <Col span="4">
        <Row>
          <Col span="6">
            <Icon type="email" size="40"></Icon>
          </Col>
          <Col span="18" style="padding-top:10px">
            <p style="font-size:12px">微信消息发送人数</p>
            <p style="font-size:16px">{{wxSendNum}}人</p>
          </Col>
        </Row>
      </Col>

      <Col span="6">
        <Button size="large" type="primary" long @click.native="Savemarketbasicinfo('formItem')" style="line-height: 56px;">创建</Button>
      </Col>
    </Row>

    <Modal v-model="chooseModel" title="选择优惠券" width="650" :mask-closable="false">
      <Table :loading="TableLoading" border :data="couponList" :columns="CouponColumns" ref="table" @on-select="chooseInfo" @on-select-all="chooseALLInfo"></Table>
      <Row type="flex" justify="center">
        <Col>
          <Page :id="pageIdCoupon" :total="coupontotal" show-total show-sizer show-elevator @on-change="changeCurrentcoupon" @on-page-size-change="changePageSize" :current.sync="current" style="margin: 24px 0 24px;text-align:right"></Page>
        </Col>
        <Col push="1">
          <Button style="margin-top: 4vh;" type="primary" @click="goElevatorPage(pageIdCoupon)">跳转</Button>
        </Col>
      </Row>
      <div slot="footer">
        <i-button type="primary" size="large" long @click="chooseConfirm" icon="checkmark-round">保存</i-button>
      </div>
    </Modal>
    <Modal v-model="choosesmsModel" title="选择短信模板" width="750" :mask-closable="false">
      <Table :loading="TableLoading" highlight-row border :data="smsList" :columns="chooseColumnsms" ref="table" @on-current-change="choosesmsInfo"></Table>
      <Row type="flex" justify="center">
        <Col>
          <Page :id="pageIdsms" :total="totalsms" show-total show-sizer show-elevator @on-change="changeCurrentsms" @on-page-size-change="changesmsPageSize" :current.sync="current" style="margin: 24px 0 24px;text-align:right"></Page>
        </Col>
        <Col push="1">
          <Button style="margin-top: 4vh;" type="primary" @click="goElevatorPage(pageIdsms)">跳转</Button>
        </Col>
      </Row>
    </Modal>
    <Modal v-model="choosewxModel" title="选择微信文本模板" width="750" :mask-closable="false">
      <Table border :loading="TableLoading" highlight-row :data="wxList" :columns="WxColumn" ref="table" @on-current-change="choosewxmodelinfo"></Table>
      <Row type="flex" justify="center">
        <Col>
          <Page :id="pageIdwx" :total="totalWX" show-total show-sizer show-elevator @on-change="changeCurrentwx" @on-page-size-change="changePageSize" :current.sync="current" style="margin: 24px 0 24px;text-align:right"></Page>
        </Col>
        <Col push="1">
          <Button style="margin-top: 4vh;" type="primary" @click="goElevatorPage(pageIdwx)">跳转</Button>
        </Col>
      </Row>
    </Modal>

    <!-- <Modal v-model="showfieldmodel"  title="选择动态字段">
      <Form-Item label="选择动态字段：" prop="resourceId">
        <Row style="margin-top:-3vh;">
            <Col span="12" style="padding-right:10px">
                <Select v-model="resourceId" :loading="loading1" clearable @on-open-change="Fetchdynamicfield">
                  <Option v-for="(option, index) in fieldlist" :value="option.id" :key="index">{{option.label}}</Option>
                </Select>
            </Col>
        </Row>
      </Form-Item>
    </Modal> -->

    <Modal v-model="showphonemodel"  title="输入测试手机号" @on-ok="splitphone">
      <Form-Item label="测试手机号：">
        <Row style="margin-top:-3vh;">
            <Col span="24" style="padding-right:10px">
              <Input v-model="phone" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入手机号" />
            </Col>
        </Row>
      </Form-Item>
    </Modal>
  </Form>
</template>
<script>
import {
  fetchmarketactvityCategory,
  fetchmarketgroupcategoryList,
  fetchmarketcouponList,
  fetchmarketsmsmodellist,
  fetchmarketwxlist,
  fetchmarketactivitygrouplist,
  fetchmarkettargetSendNum,
  savemarketbasicinfo,
  savemarketgrouplist,
  savemarketReward,
  saveCommunication,
  saveSchedule,
  sendsmstest,
  fetchdynamicfield
} from "@/api/marketing";
import { fetchAppId,fetchList } from '@/api/wx';
import filter from '../../filters/index';
export default {
  name: "list",
  components: {},
  data() {
    return {
      min:0,
      groupname:'',
      pageId:"targetPage",
      pageIdsms:"pageIdsms",
      pageIdwx:"pageIdwx",
      pageIdCoupon:"pageIdCoupon",
      formItem: {
        // 营销活动基础信息
        name: "",
        campaignCategoryId: "",
        // 营销人群信息
        campaignId: "",
        targetIds: "",

        // 营销权益
        targetCategoryId:1,
        value:0,
        couponIds:'',
        smsCommunication:{    
          excludeBlacklist:[],
          communicationHours:0,
          contents:'', // 短信内容
          communicationTemplateId:'',
        },
        wxCommunication:{
          excludeBlacklist:[],
          communicationHours:0,
          contents:'',
          communicationTemplateId:'',
        },
        isRepeat:"",
        priority:"",

        scheduleModel:'1',
        scheduleExecTimeStr:'',
        periodType:'',
        isWorkingDay:'',
        weeks:[],
        monthDay:'',
        sendTime:'',
        startTimeStr:'',
        endTimeStr:'',
        sendCommAfterReward:[],
        reportMonitorHours:'',
        // 短信模板相关
      },


      /** 权益-积分 */
      integralmark:false,
      /** 权益-线下优惠券 */
      couponmark:false,


      showworking:false,
      showweek:false,
      showmonth:false,
      marketname:'',  // 搜索营销人群
      resourceId:'',  // 短信测试动态字段
      cTemplateId:'', // 测试模板ID
      phone:'',

      disabled1: true,
      vertical: "",
      dayradio:'',
      SelectMarketing: "",
      TableLoading: false,
      actvityCategorylist: [],
      tabslist: [{"name":"默认分组","id":null}],
      couponList: [], // 优惠券列表
      coupontotal:1,
      current: 1,
      total: 0, //总条数
      pageNum: 1, //开始条数
      pageSize: 10, //每页记录数
      page: 1,
      total: 0,
      limit: 10,

      totalgroup:0,
      pagegroup:1,
      limitgroup:10,
      
      listData: [], // @:data 列表数据
      smsList:[],  // 短信模板列表
      totalsms:0,
      pagesms:1,
      limitsms:10,

      wxList:[],   // 微信文本模板列表
      totalwx:0,
      couponListAdd: [],    // 获取选择的优惠券信息
      chooseModel: false,
      choosewxModel:false,
      choosesmsModel:false,
      showfieldmodel:false, // 短信动态字段Model
      showphonemodel:false, // 测试手机号Modal
      cyclicitybegin:'',
      cyclicityend:'',
      vertical:'days',
      wxapplist:[],
      // 周期发送显示/隐藏
      num: 1,
      tabs:[],
      nums: 0,

      index: 1,
      targetgroupname:'',
      smsSendNum:'',
      couponSendNum:'',
      wxSendNum:'',

      fieldlist:[], // 短信动态字段列表
      fieldtext:'',
      loading1:false,
      // 微信模板分页
      start:1,
      limit:10,
      totalWX:0,

      // 微信/短信显示隐藏
      showsmsmark:false,
      showwxmark:false,

      showwxmodel:true,
      wxmodel:[],


      showpriority:false, //优先级显示/隐藏
      showcircle:false,
      showlife:false,
      formDynamic: {
        items: [
          {
            value: "",
            index: 1,
            status: 1
          }
        ]
      },
      groupcolumns: [
        //列表表头
        {
          type: "selection",
          align: "center",
          width:60
        },
        {
          title: "人群名称",
          key: "name",
          align: "center"
        },
        {
          title: "人群总数",
          key: "lastCalcTargetNum",
          align: "center"
        },
        {
          title: "状态",
          key: "contents",
          align: "center",
          render: (h, params) => {
            const type = params.row.status === 1 ? "success" : "error";
            let _this = this;
            let text = "";
            let color = "";
            if (params.row.status == 0) {
              text = "删除";
              color = "red";
            } else if (params.row.status == 1) {
              text = "创建";
              color = "lightorange";
            } else if (params.row.status == 2) {
              text = "进行中";
              color = "lightskyblue";
            } else if (params.row.status == 3) {
              text = "计算完成";
              color = "lightgreen";
            }
            const row = params.row;
            return h("span", {

              },
              text
            );
          }
        },

        {
          title: "创建时间",
          key: "createDate",
          align: "center",
          width:250,
          render: (h, params) => {
            return h('div', this.changeDate(this.listData[params.index].createDate));
          }
        },

        {
          title: "创建人",
          key: "createBy",
          align: "center"
        }
      ],

      CouponColumns: [
        {
          type: "selection",
          align: "center"
        },
        {
          title: "优惠券名称",
          key: "name",
          align: "center"
        },
        {
          title: "优惠券金额",
          key: "amount",
          align: "center"
        },
        {
          title: "使用期限开始日期",
          key: "beginDate",
          align: "center",
          render: (h, params) => {
            return h('div', this.changeDate(this.couponList[params.index].beginDate));
          }
        },
        {
          title: "使用期限结束日期",
          key: "endDate",
          align: "center",
          render: (h, params) => {
            return h('div', this.changeDate(this.couponList[params.index].endDate));
          }
        },
        {
          title: "使用条件",
          key: "description",
          align: "center",
          tooltip: "true"
        }
      ],
      chooseColumnsms: [
        {
          title: "短信模板名称",
          key: "name",
          align: "center",
        },
        {
          title: "文案",
          key: "contents",
          align: "center",
          tooltip: "true"
        },
        {
          title: "通道",
          key: "communicationChannelTypeId",
          align: "center",
          render: (h, params) => {
            const type = params.row.communicationChannelTypeId === 1 ? "success" : "error";
            let _this = this;
            let text = "";
            if (params.row.communicationChannelTypeId == 1) {
              text = "DM";
            } else if (params.row.communicationChannelTypeId == 2) {
              text = "EDM";
            } else if (params.row.communicationChannelTypeId == 3) {
              text = "SMS";
            } else if (params.row.communicationChannelTypeId == 4) {
              text = "Call Center";
            }else if(params.row.communicationChannelTypeId == 5){
              text = "MMS";
            }else if(params.row.communicationChannelTypeId == 6){
              text = "Wechat";
            }else if(params.row.communicationChannelTypeId == 7){
              text = "Website";
            }
            const row = params.row;
            return h("span", {

              },
              text
            );
          }
        }
      ],
      WxColumn: [
        {
          title: "模板名称",
          key: "name",
          align: "center",
        },
        {
          title: "调用微信模板",
          key: "contents",
          align: "center",
          tooltip: "true"
        },
        {
          title: "创建时间",
          key: "createDate",
          align: "center",
          render: (h, params) => {
            return h('div', this.changeDate(this.wxList[params.index].createDate));
          }
        }
      ],
      chooseList: [], // 优惠券参数
    };
  },
  methods: {
    changegroupPageSize(pageSize){
      this.pagegroup = 1,
      this.limitgroup = pageSize;
      this.updateTableList();
    },
    //分页
    changePageSize(pageSize) {
      this.limit = pageSize;
      this.updateTableList();
    },

    changesmsPageSize(smspageSize) {
      this.pagesms = 1;
      this.limitsms = smspageSize;
      this.Fetchmarketsmsmodellist();
    },

    FetchmarketactvityCategory() {//查询营销活动类别
      fetchmarketactvityCategory().then(res => {
        if (res.data.code == 200) {
          this.actvityCategorylist = res.data.result.campaignCategoryList;
        }
      }).catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
      })
    },

    toggle(index,tab){
      this.pagegroup = 1;
			this.nums = index;
      this.formItem.targetCategoryId = tab.id;
      this.updateTableList();
    },

    showsmsmodel(){
        this.choosesmsModel = true;
        this.pagesms = 1;
        this.Fetchmarketsmsmodellist();
    },

    showsms(){
      this.showsmsmark =! this.showsmsmark;
    },
    showwx(){
      this.showwxmark =! this.showwxmark;
    },
    showisworking(){
      this.num = 1;
    },
    showisweek(){
      this.num = 2;
    },
    showismonth(){
      this.num = 3;
    },
    splitphone(){  // 拼接短信测试手机号
      this.phone=[...this.phone].map((o,i)=>i%11==10? o + ";" : o ).join("");
    },
    
    splitweeks(){  // 拼接星期
      // this.formItem.weeks=[...this.formItem.weeks].map().join(",");
      let weekslist = this.formItem.weeks;
      for(var i = 0; i < weekslist.length;i++){
          this.formItem.weeks.join(',')
      }
    },

    /** 格式化时间 */
    changeDate(value) {
      var dateee = new Date(value).toJSON();
      var date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'');
      return date;
    },
    //列表
    updateTableList() {
      this.TableLoading = true;
      this.load = true;
      var reqParams = {
        // name: this.formItem.name,
        page: this.pagegroup,
        limit: this.limitgroup,
        campaignId:this.formItem.campaignId,
        targetCategoryId: this.formItem.targetCategoryId,
      };
      fetchmarketactivitygrouplist(reqParams).then((res) => {
        this.TableLoading = false;
        if (res.data.code == 200 ) {
          this.totalgroup = res.data.result.total;
          this.pagegroup = res.data.result.pages;
          this.limitgroup = res.data.result.size;
          this.listData = res.data.result.records;
        }
      }).catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
      })
    },

    updateTableLists() {
      this.TableLoading = true;
      this.load = true;
      var reqParams = {
        name: this.groupname,
        page: this.pagegroup,
        limit: this.limitgroup,
        campaignId:this.formItem.campaignId,
        targetCategoryId: this.formItem.targetCategoryId,
      };
      fetchmarketactivitygrouplist(reqParams).then((res) => {
        this.TableLoading = false;
        if (res.data.code == 200 ) {
          this.totalgroup = res.data.result.total;
          this.pagegroup = res.data.result.pages;
          this.limitgroup = res.data.result.size;
          this.listData = res.data.result.records;
        }
      }).catch(error=>{
          this.$Message.error("操作失败【" + error + "】");
      })
    },

    queryTableList(params){  // 搜索营销人群
      this.pagegroup = 1,
      this.updateTableLists(this.params);
    },


    FetchmarketgroupcategoryList(params) {     //查询营销人群类别tabs
      var reqParams = {
        page: this.page,
        limit: this.limit,
        total: this.total,
      };
      fetchmarketgroupcategoryList(reqParams).then(res => {
        if (res.status == 200 && res.data.records && res.data.records) {
            var tab = {
              name:'默认分类',
              id:null
            }
            var tabArr = [];
            tabArr.push(tab);
            this.tabslist = tabArr.concat(res.data.records);
            if(this.formItem.targetCategoryId == 1 && this.tabslist.length > 0){
              this.formItem.targetCategoryId = this.tabslist[0].id;
              this.updateTableList();
            }
          }
        })
        .catch(error => {
          this.$Message.error("操作失败【" + error + "】");
        });
    },


    FetchmarketcouponList(params) { //查询营销优惠券列表
      this.TableLoading = true;
      this.load = true;
      var reqParams = {
        page: this.page,
        limit: this.limit,
      };
      fetchmarketcouponList(reqParams).then((res) => {
          this.TableLoading = false;              
          if (res.data.code == 200) {
            this.couponList = res.data.data.records;
            this.limit = res.data.data.size;
            this.pages = res.data.data.current;
            this.coupontotal = res.data.data.total;
          }
          return false
        })
        .catch((error) => {
           this.$Message.error("操作失败【" + error + "】");
        });
    },
    Fetchmarketsmsmodellist(params) { // 请求短信模板列表
      this.TableLoading = true;
      this.load = true;
      var reqParams = {
        page: this.pagesms,
        limit: this.limitsms,
      };
      fetchmarketsmsmodellist(reqParams).then((res) => { 
        this.TableLoading = false;
        if (res.data.code == 200) {
          this.totalsms = res.data.data.total;
          this.pagesms = res.data.data.pages;
          this.limitsms = res.data.data.size;
          this.smsList = res.data.data.records;
        }
         return false
      }).catch((error)=>{
          this.$Message.error("操作失败【" + error + "】");
      })
    },

    Fetchdynamicfield(params){     // 查询短信模板动态字段
     var reqParams = {
       limit:10,
       page:1
     }
      fetchdynamicfield(reqParams).then((res)=>{
        this.loading1 = true;
        if(res.status == 200){
          this.loading1 = false;
          this.fieldlist = res.data.records;
        }
      })
      .catch((error)=>{
         this.$Message.error("操作失败【" + error + "】");
      })
    },

    FetchmarkettargetSendNum(){      // 新建营销活动人群总数查询列表
      var reqParams = {
        targetIds: this.formItem.targetIds
      };
      fetchmarkettargetSendNum(reqParams).then((res)=>{
        if (res.data.code == 200) {
          this.wxSendNum = res.data.result.wxSendNum;
          this.smsSendNum = res.data.result.smsSendNum;
          this.couponSendNum = res.data.result.couponSendNum;
          this.targetgroupname = res.data.result.name;
        }
      })
      .catch((error)=>{
         this.$Message.error("操作失败【" + error + "】");
      })
    },

    FetchwxAppId(params){          // 请求微信公众号
      fetchAppId().then((res)=>{
        if(res.data.code == 0){
          this.wxapplist = res.data.data;
          this.DateReady = true;
        }
      })
      .catch((error)=>{
         this.$Message.error("操作失败【" + error + "】");
      })
    },

    checkAppId(params){
      var reqParams = {
        start: this.start,
				limit: this.limit,
      }
        fetchList(reqParams).then(res => {
          if (res.status == 200) {
            this.wxList = res.data.records;
            this.start = res.data.pages;
            this.limit = res.data.size;
            this.totalWX = res.data.total;
          }
      }).catch(error => {
          this.$Message.error(error);
      })},


    returnTable() {
      this.$router.back(-1)
    },

    // 新建营销活动相关保存
    Savemarketbasicinfo(){     // 保存新建营销活动基础信息
          if (this.formItem.name == "") {
            this.$Message.error("请输入营销活动名称!");
            return;
          }
          if (this.formItem.targetIds == "") {
            this.$Message.error("请选择营销人群!");
            return;
          }
          if (this.formItem.isRepeat == '1' && this.formItem.isRepeat == "") {
            this.$Message.error("请设置沟通方式优先级!");
            return;
          }
          if (this.formItem.isRepeat == '0' && this.formItem.priority == "") {
            this.$Message.error("请选择优先级设置!");
            return;
          }
          if (this.formItem.scheduleModel == 2 && this.formItem.scheduleExecTimeStr == "") {
            this.$Message.error("请选择定时发送时间!");
            return;
          }
          if (this.formItem.scheduleModel == 3 && this.formItem.sendTime == "") {
            this.$Message.error("请选择短信发送时间!");
            return;
          }
          if (this.formItem.scheduleModel == 3 && this.formItem.startTimeStr == "") {
            this.$Message.error("请选择周期开始时间!");
            return;
          }
          if (this.formItem.scheduleModel == 3 && this.formItem.endTimeStr == "") {
            this.$Message.error("请选择周期结束时间!");
            return;
          }
          if (this.formItem.startTimeStr > this.formItem.endTimeStr) {
            this.$Message.error("开始时间不能晚于结束时间,请重新选择!");
            return;
          }
          if (this.formItem.reportMonitorHours == "") {
            this.$Message.error("请输入效果监控时间!");
            return;
          }
          var reqParams = {
            name:this.formItem.name,
            campaignCategoryId:this.formItem.campaignCategoryId,
          };
          savemarketbasicinfo(reqParams).then((res)=>{
            if(res.data.code == 200){
              this.formItem.campaignId = res.data.result.campaignId;
              this.Savemarketgrouplist();
              this.SavemarketReward();
              this.SaveCommunication();
              this.SaveSchedule();
              this.$Message.success('创建成功!');
              setTimeout(()=>{
                  this.$router.push({path:'/campaign/marketing'});
              },1500)
            }
          })
          .catch((error)=>{
            this.$Message.error("创建失败【" + error + "】");
          })
    },
    gomarketinglist(){
       this.$router.push({path:'/campaign/marketing'});
    },
    goaddgroup(){
       this.$router.push({path:'/customer/addCustomerGroup'});
    },
    Savemarketgrouplist(){    // 保存选择的营销活动人群
      var reqParams = {
        campaignId:this.formItem.campaignId,
        targetIds:this.formItem.targetIds,
      };
      savemarketgrouplist(reqParams).then((res)=>{
        if(res.data.code == 200){

        }
      })
      .catch((error)=>{
        this.$Message.error("操作失败【" + error + "】");
      })
    },

    SavemarketReward(){      // 保存选择的权益
      let a = (this.formItem.value).toString()
      var reqParams = {
        campaignId:this.formItem.campaignId,
        value:a,
        couponIds:this.formItem.couponIds,
      };
      savemarketReward(reqParams).then((res)=>{
        if(res.data.code == 200){

        }
      })
      .catch((error)=>{
        this.$Message.error("操作失败【" + error + "】");
      })
    },

    SaveCommunication(){     // 保存沟通方式
    this.formItem.smsCommunication.contents = JSON.stringify(this.formItem.smsCommunication.contents);
    this.formItem.wxCommunication.contents = JSON.stringify(this.formItem.wxCommunication.contents);
    this.formItem.smsCommunication.excludeBlacklist = this.formItem.smsCommunication.excludeBlacklist.join(',');
    this.formItem.wxCommunication.excludeBlacklist = this.formItem.wxCommunication.excludeBlacklist.join(',');
      var reqParams = {
        campaignId:this.formItem.campaignId,
        smsCommunication:this.formItem.smsCommunication,
        wxCommunication:this.formItem.wxCommunication,
        isRepeat:this.formItem.isRepeat,
        priority:this.formItem.priority,
        communicationTemplateId:this.formItem.communicationTemplateId
      };
      saveCommunication(reqParams).then((res)=>{
        if(res.data.code == 200){

        }
      })
      .catch((error)=>{
        this.$Message.error("操作失败【" + error + "】");
      })
    },

    SaveSchedule(){     // 保存营销时间
      let a = this.formItem.weeks.join(',');
      let b = this.formItem.sendCommAfterReward.join(',');
      var reqParams = {
        campaignId:this.formItem.campaignId,
        scheduleModel:this.formItem.scheduleModel,
        scheduleExecTimeStr:this.formItem.scheduleExecTimeStr,
        periodType:this.formItem.periodType,
        isWorkingDay:this.formItem.isWorkingDay,
        weeks:a,
        monthDay:this.formItem.monthDay,
        sendTime:this.formItem.sendTime,
        startTimeStr:this.formItem.startTimeStr,
        endTimeStr:this.formItem.endTimeStr,
        reportMonitorHours:this.formItem.reportMonitorHours,
        sendCommAfterReward:b,
      };

      saveSchedule(reqParams).then((res)=>{
        if(res.data.code == 200){
          
        }
      })
      .catch((error)=>{
        this.$Message.error("操作失败【" + error + "】");
      })
    },

    Sendsmstest(){
      var reqParams = {
        phone: this.phone,
        cTemplateId: this.formItem.smsCommunication.communicationTemplateId,
        resourceId : this.resourceId,
      };
      sendsmstest(reqParams).then((res)=>{
        if(res.data.code == 200){
            this.$Message.success('发送成功！')
        }
      })
      .catch((error)=>{
        this.$Message.error("操作失败【" + error + "】");
      })
    },

    chooseInfogroup(obj){  // 营销人群id拼接
      let targetIdlist = '';
      obj.forEach(item=>{
        targetIdlist += item.id + ',';
        this.formItem.targetIds = targetIdlist;
        this.FetchmarkettargetSendNum();
      });
    },

    chooseALLgroup(obj) {
      let targetIdlists = '';
      obj.forEach(item=>{
        targetIdlists += item.id + ',';
        this.formItem.targetIds = targetIdlists;
        this.FetchmarkettargetSendNum();
      })
    },

    choosesmsInfo(currentRow){
      if(currentRow.contents){
        this.formItem.smsCommunication.contents = currentRow.contents;
        this.formItem.smsCommunication.communicationTemplateId = currentRow.id;
      }
    },

    choosesmschangeInfo(obj){
      let sms = [];
      obj.forEach(item=>{
        sms.push(item.contents);
        this.formItem.contents = sms;
      })
    },

    choosewxmodelinfo(currentRow){  // 获取选中的微信模板信息
      if(currentRow.contents.length == 0){
        this.showwxmodel = true;
      }else{
        this.showwxmodel = false;
        this.formItem.wxCommunication.contents = JSON.parse(currentRow.contents);
        this.formItem.wxCommunication.communicationTemplateId = currentRow.templateId;
      }
    },

    chooseInfo(obj) {
      this.chooseList = obj;
      let couponIdslist = '';
      obj.forEach(item=>{
        couponIdslist += item.id + ',';
        this.formItem.couponIds = couponIdslist;
      })
    },

    chooseALLInfo(obj) {
      this.chooseList = obj;
    },

    //设置线下优惠券 -弹窗叠加
    chooseConfirm(obj) {
      this.couponListAdd.push(this.chooseList);
      this.chooseModel = false;
    },
    //设置线下优惠券 -编辑
    editCouponListItem(item) {
    },

    //设置线下优惠券 -移除
    removeCouponListItem(index) {
      this.couponListAdd.splice(index, 1);
    },

    /** 权益显示/隐藏(积分/优惠券) */
    showintegralmarks(integralmark) {
      this.integralmark =! this.integralmark;
    },
    showcouponmarks(){
      this.couponmark =! this.couponmark;
    },
    handleRemove(index) {
      this.wxmodel.splice(0,1);
      this.showwxmodel = true;
    },
    changestatus() {
      this.disabled1 != this.disabled1;
    },

    pageable(current) {   // 切换营销人群
      this.pagegroup = current;
      this.updateTableList();
    },

    changeCurrentcoupon(current){   //切换优惠券列表
      this.pages = current;
      this.FetchmarketcouponList();
    },

    changeCurrentsms(current){  //切换短信列表
      this.pagesms = current;
      this.Fetchmarketsmsmodellist();
    },

    changeCurrentwx(current){
      this.start = current;
      this.checkAppId();
    },

    hidePriority(){
      this.showpriority = false;
    },
    showPriority(){  // 控制优先级显示/隐藏
      this.showpriority = true;
    },
    
    showCircle(){
      this.showcircle = true;
      this.showlife = true;
    },
    hideCircle(){
      this.showcircle = false;
      this.showlife = false;
    },
    showPriority(){  // 控制优先级显示/隐藏
      this.showpriority = true;
    },
    
    goElevatorPage(pageId){
      var evtObj;
      var thisPage=document.getElementById(pageId);
      var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
      if(elevatorDiv && elevatorDiv.length>0){
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {//firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents');
          evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
        } else {//chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents');
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },
    
    FetchData() {
      this.FetchmarketgroupcategoryList();
      this.FetchmarketcouponList();
      this.Fetchmarketactivitygrouplist();
    },
  },

  created() {
    this.FetchData();
  },
  mounted () {
    this.checkAppId();
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/common.scss";
.active {
  color: #3089dc;
}
 .activetab{
      min-width: 9vw;
      color: lightskyblue;
      border-bottom:5px solid lightskyblue;
  }
.cardMessage {
  .ivu-icon {
    font-size: 38px;
  }
  .count {
    font-size: 12px;
    color: #9ea7b4;
    height: 30px;
  }
  .name {
    font-size: 16px;
  }
}
.Selectinterest {
  width: 100%;
  height: 20vh;
  position: relative;
  .integral_box,
  .coupon_box {
    // 选择权益样式
    width: 22vw;
    height: 20vh;
    box-shadow: 0px -2px 0px 0px #f2f2f2,
      /*上边阴影    */ -2px 0px 0px 0px #f2f2f2,
      /*左边阴影  */ 2px 0px 0px 0px #f2f2f2,
      /*右边阴影  */ 0px 2px 0px 0px #f2f2f2; /*下边阴影  */
    box-sizing: border-box;
    .mark {
      width: 30px;
      height: 30px;
      color: #fff;
      text-align: center;
      line-height: 30px;
      position: absolute;
      bottom: 0px;
      right:2.1vw;
      background-color: #3089dc;
    }
  }
}
.underline_coupon{        // 线下优惠券
  margin-top: 1vh;
  box-shadow: 0px -2px 0px 0px #f2f2f2,
        /*上边阴影    */ -2px 0px 0px 0px #f2f2f2,
        /*左边阴影  */ 2px 0px 0px 0px #f2f2f2,
        /*右边阴影  */ 0px 2px 0px 0px #f2f2f2; /*下边阴影  */
  .title{
    padding-left: 1vw;
    font-weight: bolder;
    font-size: 14px;
    color: #333;
  }
  .underline_coupon_container{
    display: flex;
    height: auto;
     .underline_coupon_box{
        min-height: 30vh;
        list-style: none;
        li{
          float: left;
          margin-right: 1vw;
        }
        .underline_coupon_detail{
          width: 22vw;
          min-height: 25vh;
          display: inline-block;

        }
      }
  }
}
.sms_container{         // 设置短信
  margin-top: 1vh;
  .sms_container_box{
    width: 60vw;
    height: 28vh;
    margin-top: 2vh;
    border: 1px solid #f2f2f2;
    .sms_container_header{
      span:hover{
        cursor: pointer;
      }
    }
    .button_box{
      margin: 0px 0px 1vh 0px;
      padding: 1vh 0px 0px 1vw;
    }
  }
}

.wx_modal_container{  // 微信模板消息
  width: 500px;
  height: 100px;
  margin-top: 1vh;
  background-color: #f2f2f2;
}
.marketingtime{
  width: 70vw;
  padding-left: -4vw;
  .cyclicitytabs{   // 营销时间
    width: 60vw;
    height: 20vh;
    margin-left: 7vw;
    margin-top: -3vh;
  }
}

.activity_group{  // 底部
  width: 80%;
  min-height:100px;
  top:100%;
  z-index: 1;
  position:fixed;
  margin-top:-120px;
  border:1px solid #A3A3A3;
  background: #fff;  padding: 16px;
}

 .tabs_container{   //tabs
   width:100%;
   padding-bottom: 2vh;
   background-color: #fff;
   .tabs_box{
       width: 60%;
       margin-top: -4vh;
       .tabs_list{
          width:50vw;
          height: 7vh;
          border-bottom:1px solid #ccc;
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          overflow-y: hidden;
           li{
               display: block;
               float: left;
               min-width: 10vw;
               height: 7vh;
               font-size: 14px;
               color: #333;
               line-height: 35px;
               text-align: center;
               &:hover{
                   cursor: pointer;
               }
               .active{
                    min-width: 9vw;
                    color: lightskyblue;
                    border-bottom:5px solid lightskyblue;
                }
            }

       }
       .add_btn{
           width:6vw;
           height: 5vh;
           float: right;
           margin-right: 1%;
           margin-top: -8vh;
       }
   }
   .content{
       width: 100%;

   }
 }

 .communicationmode_list{
   width: 100%;
   list-style: none;
   li{
     display: inline-block;
     width: 22vw;
     height: 20vh;
     margin: 0;
     padding: 0;
     margin-right: 1vw;
     box-shadow: 0px -2px 0px 0px #f2f2f2,
      /*上边阴影    */ -2px 0px 0px 0px #f2f2f2,
      /*左边阴影  */ 2px 0px 0px 0px #f2f2f2,
      /*右边阴影  */ 0px 2px 0px 0px #f2f2f2; /*下边阴影  */
      box-sizing: border-box;
      position: relative;
      .mark {
        width: 30px;
        height: 30px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        position: absolute;
        bottom: 0px;
        right:0vw;
        background-color: #3089dc;
        .active{
            color: lightskyblue;
        }
    }
   }
 }
</style>
